{% extends "base.html" %}

{% block title %}Create your profile{% endblock %}

{% block head %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/filestyle.js"></script>
<script type="text/javascript">
$(function() {
  $("input#id_photo").filestyle({ 
    image: "{{ MEDIA_URL }}images/input-file-browse.gif",
    imageheight : 24,
    imagewidth : 59,
    width : 180
  });
  $("#id_first_name").focus();
});
</script>
{% endblock %}

{% block primary-content %}
<span class="breadcrumbs"><a href="{% url index %}" title="Home">Home</a> &raquo; Create Profile</span>
<h2>Create your profile</h2>
<div class="form-wrapper clearfix">
	<form id="login" class="profile-edit simple-form" enctype="multipart/form-data" method="post">
		{% csrf_token %}
    <h3>Enter your information</h3>
    <p>All fields are optional.</p>
    <fieldset>
      <div class="form-item{% if form.first_name.errors %} error{% endif %}">
        <label for="id_first_name">First name</label>
        {{ form.first_name }}
      </div>
      <div class="form-item{% if form.last_name.errors %} error{% endif %}">
        <label for="id_last_name">Last name</label>
        {{ form.last_name }}
      </div>
      <div class="form-item{% if form.email.errors %} error{% endif %}">
        <label for="id_email">Email</label>
        {{ form.email }}
      </div>
      <div class="form-item{% if form.address.errors %} error{% endif %}">
        <label for="id_address">Address</label>
        {{ form.address }}
      </div>
      <div class="form-item{% if form.city.errors %} error{% endif %}">
        <label for="id_city">City</label>
        {{ form.city }}
      </div>
      <div class="form-item">
        {{ form.state }}
      </div>
    </fieldset>
    <fieldset>
        <legend>Upload a photo for your profile</legend>
        <div id="photo-uploader" class="form-item{% if form.photo.errors %} error{% endif %}">
          {{ form.photo }}
        </div>
        <p class="note">(Photos will be resized and cropped to 100 by 100px)</p>
    </fieldset>
    <fieldset>
		  <div class="checkbox form-item{% if form.email_opt_in.errors %} error{% endif %}">
          {{ form.email_opt_in }}
          <label class="checkbox-label">Send me email updates about important news.</label>
      </div>
    </fieldset>
		<div class="form-input clear-left">
			<input class="button" type="submit" value="Save Profile"/>
		</div>
	</form>
</div><!--end .form-wrapper-->
{% endblock %}

{% block secondary-content %}
  {% include "snippets/reports_and_news.html" %}
{% endblock %}


